<template>
  <div>
    <Breadcrumb :style="{margin: '24px 0'}">
      <BreadcrumbItem>知识管理</BreadcrumbItem>
      <BreadcrumbItem>
        <router-link to="/index/questionCheck">审核问题</router-link>
      </BreadcrumbItem>
    </Breadcrumb>
    <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
      <div>
        <div class="messageTitle message">
          <div style="width:10%;">知识id</div>
          <div style="width:23%;">知识标题</div>
          <div style="width:11%;">核心词</div>
          <div style="width:10%;">状态</div>
          <div style="width:12%;">修改人</div>
          <div style="width:17%;">编辑时间</div>
          <div style="width:17%;">操作</div>
        </div>
        <!-- 问题 -->
        <div>
          <div class="message" v-for="(item,index) in showList" :key="index">
            <div style="width:10%;">{{item.id}}</div>
            <div style="width:23%;text-align:left;">{{item.question}}</div>
            <div style="width:11%;">{{item.keyword}}</div>
            <div style="width:10%;">{{item.isDeleted}}</div>
            <div style="width:12%;">{{item.author}}</div>
            <div style="width:17%;">{{item.updateTime}}</div>
            <div style="width:17%;">
              <Button type="info" size="small" ghost @click="detail = true; modelDetail(item)">详情</Button>
              <Button
                type = "success"
                size = "small"
                ghost
                @click = "publish = true;modelPublish(item)"
              >发布</Button>
              <Button type="error" size="small" ghost @click="deleteJudge(item.id)">删除</Button>
              <!-- 删除对话框 -->
              <Modal v-model="dele" width="360">
                <p slot="header" style="color:#f60;text-align:center">
                  <Icon type="ios-information-circle"></Icon>
                  <span>删除确认</span>
                </p>
                <div style="text-align:center">
                  <p>删除操作不可恢复,确定删除吗?</p>
                </div>
                <div slot="footer">
                  <Button type="error" size="large" long :loading="modal_loading" @click="del">删除</Button>
                </div>
              </Modal>
              <!-- 发布对话框 -->
              <Modal v-model="publish" title="类目选择" width="600" @on-ok="publishKnowlwdge">
                <div>
                  <Form :value="publishObj" label-position="right" :label-width="100">
                    <FormItem label="知识标题">
                      <Input v-model="publishObj.question" disabled/>
                    </FormItem>
                    <FormItem label="知识类型">
                      <Select v-model="publishObj.knowledgeType" style="width:200px">
                        <Option
                            v-for = "item in knowledgeType"
                          :value  = "item.id"
                          :key    = "item.id"
                        >{{ item.typeName }}</Option>
                      </Select>
                    </FormItem>
                  </Form>
                </div>
              </Modal>
              <!-- 知识详情对话框 -->
              <Modal v-model="detail" title="知识详情" width="600">
                <div>
                  <Form :value="detilObj" label-position="right" :label-width="100">
                    <FormItem label="知识标题">
                      <Input v-model="detilObj.question" disabled/>
                    </FormItem>
                    <FormItem label="核心词">
                      <Input v-model="detilObj.keyword" disabled/>
                    </FormItem>
                    <FormItem label="答案">
                      <Input v-model="detilObj.answer" type="textarea" :rows="3" disabled/>
                    </FormItem>
                  </Form>
                </div>
              </Modal>
            </div>
          </div>
          <Page :total="dataCount" :page-size="pageSize" show-total @on-change="changePage1"/>
        </div>
      </div>
    </Content>
  </div>
</template>
<script>
import axios from "axios";
import { myGet, myPost } from "../utils/request.js";
import { url } from "../utils/api.js";
import { timeFormat } from "../utils/changeTime.js";
import { stateFormat } from "../utils/changeState.js";

export default {
  data() {
    return {
      knowledgeType: [],   //知识类目

      publish      : false,   //发布对话框
      publishObj   : {},
      detail       : false,   //详情对话框
      detilObj     : {},
      dele         : false,   //删除对话框
      modal_loading: false,

      totalList: [],
      showList : [],
      dataCount: 0,
      pageSize : 12
    };
  },
  methods: {
    // 删除权限判断
    deleteJudge(id) {
      var userType = localStorage.getItem("user_type");
      if (userType == 1 || userType == 2) {
        this.dele = true;
        this.modalDele(id);
      } else {
        this.$Message.error("您没有权限!");
      }
    },
    //删除
    modalDele(e) {
      this.deleteID = e;
      console.log("deleteID", e);
    },
    // 确认删除知识
    del() {
      var that               = this;
          this.modal_loading = true;
      let url                = this.Api.url.deleQuestion;
      let params             = {
        id: that.deleteID
      };
      that.http.post(url, params).then(res => {
        that.modal_loading = false;
        that.dele          = false;
        that.$Message.success("删除成功!");
        that.init();
      });
    },
    // 发布问题
    publishKnowlwdge(id) {
      var that   = this;
      let url    = that.Api.url.EditQuestionKnowledgeType;
      let params = {
        questionId   : that.publishObj.id,
        knowledgeType: that.publishObj.knowledgeType
      };
      that.http.post(url, params).then(res => {
        console.log("修改类目成功！");
        let url    = that.Api.url.publishQuestion;
        let params = {
          id: that.publishObj.id
        };
        that.http.post(url, params).then(res => {
          that.$Message.success("发布成功!");
          let url = that.Api.url.allQuestion;

          that.http.get(url).then(res => {
            that.loadingPage(res);
          });
        });
      });
    },
    // 发布模态框
    modelPublish(e) {
      this.publishObj = e;
      console.log("详情", e);

      let that = this;
      let url  = this.Api.url.allKnowledgeType;
      that.http.get(url).then(res => {
        that.knowledgeType = res;
      });
    },
    // 查看详情
    modelDetail(e) {
      this.detilObj = e;
      console.log("详情", e);
    },
    //页数变化的时候改变每一页的内容
    changePage1(index) {
      console.log("页数变化", index);
      var _start        = (index - 1) * this.pageSize;
      var _end          = index * this.pageSize;
          this.showList = this.totalList.slice(_start, _end);
    },
    loadingPage(res) {
      var that = this;
      // console.log("分页加载res", res);
      //成功,页面打开就首先获取全部数据和第一页显示的数据
      that.totalList = res;
      this.dataCount = res.length;        //所有数据条数
      res            = timeFormat(res);   //时间格式转换
      res            = stateFormat(res);  //状态转换

      for (var i = 0; i < res.length; i++) {
        //只显示“未审核”
        if (
          res[i].isDeleted == "已失效" ||
          res[i].isDeleted == "已发布" ||
          res[i].isDeleted == "已删除"
        ) {
          that.dataCount--;
          that.totalList.splice(i, 1);
          i--;
        }
      }
      if (that.dataCount < that.pageSize) {
        that.showList = that.totalList;
      } else {
        that.showList = that.totalList.slice(0, that.pageSize);
      }
    },
    init() {
      let that = this;
      let url  = this.Api.url.allQuestion;

      that.http.get(url).then(res => {
        that.loadingPage(res);
      });
    }
  },
  mounted() {
    this.init();
    let that = this;

    //查找所有类目
    let url = that.Api.url.allKnowledgeType;

    that.http.get(url).then(res => {
      that.knowledgeType = res;
      console.log("that.knowledgeType", that.knowledgeType);
    });
  }
};
</script>